'use strict';

import React from 'react';
import { Dialog,Button,Loading,Form,Input,Checkbox,Tag,Icon,Notice,Range  } from 'qnui';
import { Row, Col } from 'qnui/lib/grid';
import Radio,{ Group as RadioGroup } from 'qnui/lib/radio';
import ZhekouTags from 'components/zhekou-tags/index';
import GoodsItems from 'components/goods-items/index';
import {ajax} from 'utils/index';
import './index.scss';
const FormItem = Form.Item;
class FormMjs1Step3 extends React.Component {
	constructor(props) {
        super(props);
        this.state={
        		itemDialog:false,
        		giftTitleDialog:false
        	}
    }

	componentDidMount(){
	}

	handleShowItems(){
		this.setState({"itemDialog":true});
		
	}
	itemDialogClose(){
		this.setState({"itemDialog":false});
		const gift = this.props.field.getValue("gift");
		if(gift){
			this.props.field.setValue("gift_name",gift[0].title);
			this.setState({"giftTitleDialog":true});
		}
	}
	giftTitleDialogClose(){
		const gift_title = this.props.field.getValue("gift_name");
		if(gift_title.length>16){
			Dialog.confirm({
		        content: '礼物标题不能超过16个汉字！'
		    });
			return;
		}
		const gift = this.props.field.getValue("gift");
		gift[0].title=gift_title;
		this.props.field.setValue("gift",gift);
		this.props.setGift(gift);//////
		this.setState({"giftTitleDialog":false});
	}
	getSelectItems(items){
		this.props.field.setValue("gift",items);
		this.props.setGift(items);//////
	}
	removeGift(){
		this.props.field.setValue("gift",false);
		this.props.setGift(false);//////
	}
	vipFormatter(val){
		let shopLev = "";
		switch(val){
			case "0" :
				shopLev="店铺客户";
			break;
			case "1" :
				shopLev="普通客户";
			break;
			case "2" :
				shopLev="高级会员";
			break;
			case "3" :
				shopLev="VIP会员";
			break;
			case "4" :
				shopLev="至尊VIP会员";
			break;
		}
		return shopLev;
	}
	onShopMemberChange(lev){
		this.props.setShopMemberLevel(lev);
	}
  render() {
		const init = this.props.field.init;
		const formItemLayout = this.props.formItemLayout;
		const is_send_gift = this.props.field.getValue("is_send_gift");
		const gift = this.props.field.getValue("gift");
		const is_shop_member = this.props.field.getValue("is_shop_member");
		const shop_member_level = parseInt(this.props.field.getValue("shop_member_level"));
		const gift_display = (is_send_gift=="false" || !is_send_gift)?"none":"block";
		const gift_show = (gift&&gift.length>0)?<div className="item" onClick={this.removeGift.bind(this)}>
											<Icon type="close" size="small"  className="close" />
											<div className="item-pic"><img src={gift[0].pic_url+"_100x100"} /></div>
											<div className="item-title">{gift[0].title}</div>
									  </div>
									 :
									 <Tag shape="link"><Icon type="add" size="small"  onClick={this.handleShowItems.bind(this)} /></Tag> 
									 ;
		const shop_member_display = (is_shop_member=="false"||!is_shop_member)?"none":"block";
		return (
		<div>
        <Dialog style={{width:"100%",mainHeight:"460px"}} 
					visible = {this.state.itemDialog}
	            onOk = {this.itemDialogClose.bind(this)}
	            onCancel = {this.itemDialogClose.bind(this)}
	            onClose = {this.itemDialogClose.bind(this)} 
					title = "选择礼物"
					>
					<Row justify="center">
					    <h3>
						    <Notice title="注意事项">
						    	1）只能选择真实的淘宝商品id，可以生成物流单，并且在确定订单的页面上可以点击该商品名称跳转到商品详情页面。2）当礼物为实物商品时(有宝贝id),礼物必须为上架商品,不能为虚拟商品,不能为拍卖商品,不能有sku,不符合条件的,不做为礼物。
			             </Notice>
						    <GoodsItems nick={window.info.user_nick} showDepot={false} maxSelect={1} getSelectItems={this.getSelectItems.bind(this)}/>
					    </h3>
					</Row>
		    </Dialog>
		    <Dialog style={{width:"420",mainHeight:"460px"}} 
					visible = {this.state.giftTitleDialog}
	            onOk = {this.giftTitleDialogClose.bind(this)}
	            onCancel = {this.giftTitleDialogClose.bind(this)}
	            onClose = {this.giftTitleDialogClose.bind(this)} 
					title = "设置礼物标题"
					>
					<Row justify="center">
					    <h3>
						    <Form direction="ver"  size="large" field={this.props.field}>
						    	 <Input {...init('gift_name')}  style={{width:"380px"}} size="large" placeholder="礼品名称最长不超过16个汉字" />
						    </Form>
					    </h3>
					</Row>
		    </Dialog>
		    <FormItem
					label="是否赠送礼物"
					{...formItemLayout}>
					<RadioGroup {...init('is_send_gift', {initValue: 'false',rules: [{required: true}]})} style={{marginLeft:"10px"}} >
						<Radio id="gift_no" value="false">不赠送</Radio>
						<Radio id="gift_yes" value="true">赠送</Radio>
					</RadioGroup>
			  </FormItem>
		
			  <FormItem
					label="赠送礼物"
					{...formItemLayout} style={{display:gift_display}}>
					<div style={{minHeight:"60px",width:"200px",border:"dashed 1px #666"}}>
						 {gift_show}
					</div>
			  </FormItem>
			  <FormItem
					label="限定会员等级"
					{...formItemLayout}>
					<RadioGroup {...init('is_shop_member', {initValue: 'false',rules: [{required: true}]})} style={{marginLeft:"10px"}} >
						<Radio id="shop_member_no" value="false">不限定</Radio>
						<Radio id="shop_member_yes" value="true">限定</Radio>
					</RadioGroup>
			  </FormItem>
			  <FormItem
					label="店铺会员等级"
					{...formItemLayout} style={{display:shop_member_display}}>
					<Range defaultValue={shop_member_level} onChange={this.onShopMemberChange.bind(this)} style={{marginTop:"20px",marginLeft:"20px",width:"300px"}} tipFormatter={this.vipFormatter.bind(this)} 
		            min={0} max={4} marks={{0: '店铺客户', 1: '普通会员', 2: '高级会员', 3: 'VIP会员', 4: '至尊VIP会员'}}/>
			  </FormItem>
		</div>
    );
  }
}

export default FormMjs1Step3;
